<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
      <el-form ref="formRef2" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
		  <el-form-item label="司机信息" prop="date3" v-if="XB==1">
		    <el-select v-model="formData.date3" filterable placeholder="请选择司机" @change="changeFleet">
		        <el-option
		          v-for="item in optionsFleet"
		          :key="item.id"
		          :label="'【'+item.fleetName+'】'+item.driverName+','+item.driverPhone+';'+item.fleetType"
		          :value="'【'+item.fleetName+'】'+item.driverName+','+item.driverPhone+';'+item.fleetType">
		        </el-option>
		      </el-select>
		  </el-form-item>
		  <el-form-item label="酒店房型" prop="date4" v-if="XB==2">
		    <el-select v-model="date4"   filterable placeholder="请选择酒店" @change="changeHotel">
		        <el-option
		          v-for="item in optionsHotel"
		          :key="item.roomName+'【'+item.roomType+'】'"
		          :label="item.roomName+'【'+item.roomType+'】'"
		          :value="item.roomName+'【'+item.roomType+'】'">
		        </el-option>
		      </el-select>
		  </el-form-item>
					
                    
                 
      </el-form>
              <div slot="footer" class="dialog-footer">
		<!-- <el-button type="primary" @click="submitForm(2)" :disabled="formLoading">合并提 交</el-button>		 -->  
        <el-button type="primary" @click="submitForm(1)" :disabled="formLoading">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as HotelApi from '@/api/team/hotel';
  import * as OrdeApi from '@/api/team/orde';
  import * as FleetApi from '@/api/team/fleet';
  import moment from 'moment';
      export default {
    name: "hotelAndHoteForm",
    components: {
                    },
    data() {
      return {
		  XB:0,
        // 弹出层标题
        dialogTitle: "",
        // 是否显示弹出层
        dialogVisible: false,
        // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
        formLoading: false,
		optionsHotel:{},
		optionsFleet:{},
		rowList:{},
        // 表单参数
        formData: {
            id: undefined,
            date3: [],
            date4: [],
        },
		date3: undefined,
		date4: undefined,
		dateIndex:undefined,
        // 表单校验
        formRules: {
			date3: [{ required: true, message: '车队选择不能为空', trigger: 'blur' }],
			date4: [{ required: true, message: '酒店房型不能为空', trigger: 'blur' }]
                       
        },
        };
    },
	created() {
	  
	},
    methods: {
		async show(){
			try {
				let queryParams={
					pageNo: 1,
					pageSize: 100
				}
				//查询车队信息
				const res1 = await FleetApi.getFleetPage(queryParams);
				this.optionsFleet = res1.data.list;
				//查询酒店信息		
				const res2 = await HotelApi.getHotelPage(queryParams);
				this.optionsHotel = res2.data.list;
			} finally {
            this.formLoading = false;
          }
		},
      /** 打开弹窗 */
	  async opentow(item) {
		        this.reset();
		        this.XB=1
				this.rowList={ 
					id: item.id,
					numbers:item.numbers,
					lineNames: item.lineNames, 
					date1: item.date1,
					date2: item.date2,
					date3: item.date3,
					date4: item.date4,
				}
				console.log("打开弹窗：",this.rowList)
				this.dialogTitle = "团号【"+this.rowList.numbers+"】选择车队";
				this.show(); 
				this.dialogVisible = true;
				
								
	  },
	  async openHotel(item,Index){
		  this.reset();
		  this.dateIndex=Index
		  this.XB=2
		  this.rowList={ 
		  	id: item.id,
		  	numbers:item.numbers,
		  	lineNames: item.lineNames, 
		  	date31: JSON.parse(item.date31),
		  }
		  console.log("打开弹窗：",this.rowList)
		  this.dialogTitle = "团号【"+this.rowList.numbers+"】选择酒店";
		  this.show(); 
		  this.dialogVisible = true;
		  
	  },
      async open(row,Index) {
			this.dateIndex=Index
			this.rowList=   row.map(item => ({ 
				id: item.id,
				lineNames: item.lineNames, 
				date1: item.date1,
				date2: item.date2,
				date3: item.date3,
				date4: item.date4,
			}));
			console.log("打开弹窗：",this.rowList)
			this.show(); 
			this.dialogVisible = true;
			this.reset();
		
      },
	   /** 提交按钮 */
	  async submitForm() {
	    // 校验主表
	    await this.$refs["formRef2"].validate();
	              this.formLoading = true;
	    try {
	      const data = this.formData;
	  	  //处理添加数据 不和并的数据
		  if(this.XB==1){
			  this.rowList.date3=JSON.stringify(this.formData.date3)
			  this.rowList.date4=undefined
		  }
		  if(this.XB==2){
		     this.rowList.date3=undefined
			 //处理数据插入
			 this.rowList.date31=JSON.stringify(this.rowList.date31)
			 console.log("添加的提交",this.rowList)
		  }
	  		
	      // 添加的提交
	     await OrdeApi.updateOrde(this.rowList);
	      this.$modal.msgSuccess("添加成功");
	      this.dialogVisible = false;
	      this.$emit('success');
	    } finally {
	      this.formLoading = false;
	    }
	  },
      /** 提交按钮不使用了 */ 
      async submitForm2(type) {
        // 校验主表
        await this.$refs["formRef2"].validate();
                  this.formLoading = true;
        try {
          const data = this.formData;
		  //处理添加数据 不和并的数据
		  if(type==1){
			  this.rowList.forEach((item,index) => {
			  			item.date3=JSON.stringify(this.formData.date3)
			  			item.date4=JSON.stringify(this.formData.date4)
			  })
		  }
		  //处理添加数据 合并提交
		  if(type==2){
			   //判断日期和选择的线路是否相同
			  const lineNames = this.rowList[0].lineNames;
			  const firstDate = moment(this.rowList[0].date1).format('YYYY-MM-DD'); // 格式化日期为yyyymmdd
			  let res= this.rowList.every(item => item.lineNames === lineNames && moment(item.date1).format('YYYY-MM-DD') === firstDate);
			  console.log(lineNames,firstDate)
			  if(!res) return this.$modal.msgError("日期或者线路名称不一致无法合并！！" ); 
			  let  id=this.rowList[0].id;
			  console.log("通过合并判断：",id)
			  this.rowList.forEach((item,index) => {
			  			item.date3=JSON.stringify(this.formData.date3)
			  			item.date4=JSON.stringify(this.formData.date4)
						item.date2=id
			  })
		  }
		  console.log(this.rowList)
          // 添加的提交
         await OrdeApi.updateBatch(this.rowList);
          this.$modal.msgSuccess("添加成功");
          this.dialogVisible = false;
          this.$emit('success');
    
        } finally {
          this.formLoading = false;
        }
      },
	  //合并提交
	  submitFormF(){
		  //判断日期和选择的线路是否相同
		    if (this.rowList.length === 0) return true; // 空列表认为是所有相同
		    const lineNames = this.rowList[0].lineNames;
		    const firstDate = moment(this.rowList[0].date1).format('YYYY-MM-DD'); // 格式化日期为yyyymmdd
		    let res= this.rowList.every(item => item.lineNames === lineNames && moment(item.date1).format('YYYY-MM-DD') === firstDate);
			console.log(lineNames,firstDate)
		    if(!res) return this.$modal.msgSuccess("日期或者线路名称不一致无法合并！！" ); 
	  },
	  changeFleet(row){
		 
		    let data=this.optionsFleet.filter(item => item.id === row);
			/* this.formData.date3[0]=data[0].driverName
			this.formData.date3[1]=data[0].driverPhone
			this.formData.date3[2]=data[0].fleetName
			this.formData.date3[3]=data[0].fleetType
			this.formData.date3[4]=data[0].fleetNumber */
			//this.formData.date3=
			
		
	  },
	  changeHotel(row){
		    //let data=this.optionsHotel.filter(item => item.id === row);
		  	/* this.formData.date4[0]=data[0].roomName
		  	this.formData.date4[1]=data[0].roomType */
			console.log(row, this.dateIndex)
			this.rowList.date31[this.dateIndex]=row;
			//this.rowList.date31.splice(this.dateIndex, 0, "哈哈"); // 在下标2的位置插入item
			console.log(this.rowList.date31)
			this.formData.date4=row
	  },
      /** 表单重置 */
      reset() {
        /* this.formData = {
			id: undefined,
			date3: [],
			date4: [],
		}; */
		this.formData.date3=undefined;
		this.date3=undefined;
		this.date4=undefined
        this.resetForm("formRef");
      }
    }
  };
</script>